<template>
     <Card :dis-hover="true">
        <p slot="title">兰州财经大学创业实践申报书</p>
        <Tabs type="card" v-model="tab.value">
            <Button v-if="tab.value !== '10'"  v-show="!tpl" slot="extra"  type="primary" ghost @click="next">下一页</Button>
            <Button v-else slot="extra" v-show="!tpl" type="primary" ghost @click="submit">保存</Button>
            <TabPane name="0"  ref="pane0" label="项目基本信息">
                <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目基本信息</div>
                    </md-card-header>
                     <md-card-content>
                    <form novalidate>
                        <md-field>
                        <label>项目名称</label>
                        <md-input v-model.trim="article.Name" md-counter="30"></md-input>
                        </md-field>
                        <!-- <md-field>
                        <label>项目描述</label>
                        <md-input v-model.trim="article.Desc" md-counter="30"></md-input>
                        </md-field> -->
                         <md-field>
                        <label>所处行业</label>
                        <md-input v-model.trim="article.Industry" md-counter="30"></md-input>
                        </md-field>
                        <md-field>
                            <p class="input-lable">项目截止日期 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
                            <DatePicker type="date" placeholder="Select date"  v-model="article.Start"  ></DatePicker>  
                            <span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>
                            <DatePicker  type="date" placeholder="Select date" v-model="article.End" @on-change="dateChage"></DatePicker> 
                        </md-field>
                        <div>
                        <!-- <p>所处阶段</p> -->
                        <!-- <md-input v-model.trim="article.Step" md-counter="30"></md-input> -->
                        <md-radio v-model="article.Step" :value="0">开发阶段</md-radio>
                        <md-radio v-model="article.Step" :value="1">成长阶段</md-radio>
                        <md-radio v-model="article.Step" :value="2">成熟阶段</md-radio>
                        <!-- <md-radio v-model="radio" disabled>Disabled</md-radio> -->
                        </div>
                        <div>
                            <Upload v-if=" !tpl"
                                type="drag"
                                :action="actionUrl"
                                :max-size="5120"
                                :show-upload-list="false"
                                :headers="uploadData"
                                :on-error="uploadErrHandler"
                                :on-success="uploadSuccessHandler">
                                <div style="padding: 20px 0">
                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                    <p>点击或拖拽文件到此处上传</p>
                                    <!-- <p>点击上传文件</p> -->
                                </div>
                            </Upload>
                            <div class="ivu-upload-list">
                                <ul class="ivu-upload-list">
                                    <li class="ivu-upload-list-file ivu-upload-list-file-finish" 
                                        v-for="item in article.ImsProjectAttachment" :key="item.Id">
                                        <span>
                                            <i class="ivu-icon ivu-icon-ios-document-outline "></i>
                                            {{ item.Name }} 
                                            <i class="ivu-icon ivu-icon-ios-close ivu-upload-list-remove" @click="removeFile(item)"></i>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                    </md-card-content>
                    </md-card>
                </div>
            </TabPane>
            <TabPane name="1"  ref="pane1"  label="申请人">
                <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">申请人</div>
                    </md-card-header>

                    <md-card-content>
                        <ButtonGroup shape="circle">
                            <Button v-if="!tpl" type="primary" icon="md-add" ghost @click="addUserGroup">添加项目组成员</Button>
                            <Button v-if="!tpl" type="primary" icon="md-remove" ghost @click="removeUserGroup">移除项目组成员</Button>
                        </ButtonGroup>
                        <template v-for="item in article.ImsProjectGroup">
                            <div class=""  :key="item.Id">
                              <div class="md-layout md-gutter">
                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                          <label for="first-name">{{item.Title}}</label>
                                          <md-input name="first-name" id="first-name" autocomplete="given-name" v-model="item.UserName"  />
                                      </md-field>
                                  </div>

                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                      <label for="gender">性别</label>
                                      <md-select name="gender" id="gender" v-model="item.Sex" md-dense  >
                                      <md-option></md-option>
                                      <md-option :value="0">男</md-option>
                                      <md-option :value="1">女</md-option>
                                      </md-select>
                                  </md-field>
                                  </div>
                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                          <label for="grade">年 级</label>
                                          <md-input name="grade" id="grade" autocomplete="grade" v-model="item.Grade" />
                                      </md-field>
                                  </div>
                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                          <label for="class">专业班级</label>
                                          <md-input name="class" id="class" autocomplete="class" v-model="item.Class"  />
                                      </md-field>
                                  </div>
                              </div>
                              <div class="md-layout md-gutter">
                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                          <label for="college">学院</label>
                                          <md-input name="college" id="college" autocomplete="college" v-model="item.College" disabled  />
                                      </md-field>
                                  </div>

                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                          <label for="phone">联系电话</label>
                                          <md-input name="phone" id="phone" autocomplete="phone" v-model="item.Phone"  />
                                      </md-field>
                                  </div>
                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                          <label for="no">学号</label>
                                          <md-input name="no" id="no" autocomplete="no" v-model="item.No"  />
                                      </md-field>
                                  </div>
                                  <div class="md-layout-item md-small-size-100">
                                      <md-field >
                                          <label for="idcard">身份证号</label>
                                          <md-input name="idcard" id="idcard" autocomplete="idcard" v-model="item.IdCard"  />
                                      </md-field>
                                  </div>
                              </div>
                              <md-field >
                                  <label for="email">电子邮件</label>
                                  <md-input name="email" id="email" autocomplete="email" v-model="item.Email"  />
                              </md-field>
                          </div>
                        </template>
                    </md-card-content>

                    <!-- <md-progress-bar md-mode="indeterminate" v-if="sending" /> -->

                    <md-card-actions>
                    <!-- <md-button type="submit" class="md-primary" :disabled="sending">Create user</md-button> -->
                    </md-card-actions>
                </md-card>
                </div>
            </TabPane>
            <TabPane name="2"   ref="pane2"  label="项目指导老师信息">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">校内指导教师</div>
                    </md-card-header>
                    <md-card-content>
                         <ButtonGroup shape="circle">
                                <!-- <Tooltip content="添加经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-add" ghost @click="tutorsAddHandler">
                                        添加指导老师信息
                                        </Button>
                                <!-- </Tooltip> -->
                                <!-- <Tooltip content="移除经费预算项" placement="bottom-start" transfer> -->
                                    <Button v-if="!tpl" type="primary" icon="md-remove" ghost @click="tutorsDeleteHandler">
                                        移除指导老师信息
                                        </Button>
                                <!-- </Tooltip> -->
                                </ButtonGroup>
                      <template v-for="item in article.ImsTotur"> 
                        <div class="" :key="item.Id">
                            <div class="md-layout md-gutter">
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="first-name">导师姓名</label>
                                        <md-input name="first-name" id="first-name" autocomplete="given-name" v-model="item.Name"  />
                                    </md-field>
                                </div>

                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                    <label for="gender">性别</label>
                                    <md-select name="gender" id="gender" v-model="item.Sex" md-dense  >
                                    <md-option></md-option>
                                    <md-option :value="0">男</md-option>
                                    <md-option :value="1">女</md-option>
                                    </md-select>
                                </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="grade">年 龄</label>
                                        <md-input name="grade" id="grade" autocomplete="grade" v-model="item.Age" />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="class">职称</label>
                                        <md-input name="class" id="class" autocomplete="class" v-model="item.Title"  />
                                    </md-field>
                                </div>
                            </div>
                            <div class="md-layout md-gutter">
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="college">职务</label>
                                        <md-input name="college" id="college" autocomplete="college" v-model="item.Job"  />
                                        <!-- <md-input name="college" id="college" autocomplete="college" v-model="item.College" disabled  /> -->
                                    </md-field>
                                </div>

                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="phone">部门</label>
                                        <md-input name="phone" id="phone" autocomplete="phone" v-model="item.Org"  />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="no">联系电话</label>
                                        <md-input name="no" id="no" autocomplete="no" v-model="item.Phone"  />
                                    </md-field>
                                </div>
                                <div class="md-layout-item md-small-size-100">
                                    <md-field >
                                        <label for="idcard">手机</label>
                                        <md-input name="idcard" id="idcard" autocomplete="idcard" v-model="item.Mobile"  />
                                    </md-field>
                                </div>
                            </div>
                            <md-field >
                                <label for="email">电子邮件</label>
                                <md-input name="email" id="email" autocomplete="email" v-model="item.Email"  />
                            </md-field>
                        </div>
                      </template>
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <TabPane name="3"  ref="pane3"  label="项目组成员情况介绍">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目组成员情况介绍</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>项目组成员情况介绍(包括自身具备的知识条件，有何特长、兴趣，参加哪些科技事件创新活动等，请简要填写活动名称及成绩)</label>
                                <md-textarea v-model="article.GroupDetail" :md-counter="3200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <TabPane name="4"  ref="pane4"  label="项目简介">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目简介</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>项目简介(包括项目背景、提供的产品和服务、技术与工艺创新等，不少于800字。请另附该项目的创业计划书)</label>
                                <md-textarea v-model="article.Desc" :md-counter="1200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <!-- 项目方案 -->
            <TabPane name="5"  ref="pane5"  label="项目可行性分析">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目可行性分析</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>项目可行性分析(背景分析、成本分析、效益分析)</label>
                                <md-textarea v-model="article.Analysis" :md-counter="2200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <!-- 项目进度安排 -->
            <TabPane name="6"  ref="pane6"  label="项目运作模式和项目进度计划">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目运作模式和项目进度计划</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>项目运作模式和项目进度计划</label>
                                <md-textarea v-model="article.Schedule" :md-counter="700"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <!-- 项目完成预期成果 -->
            <TabPane name="7"  ref="pane7"  label="项目经济和社会效益分析">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目经济和社会效益分析</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>项目经济和社会效益分析(直接的财务效益，对社会的经济效益和社会效益等)</label>
                                <md-textarea v-model="article.Benefit" :md-counter="1200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <TabPane name="8"  ref="pane8"  label="成员分工情况以及对完成项目任务的承诺">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">成员分工情况以及对完成项目任务的承诺</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>成员分工情况以及对完成项目任务的承诺</label>
                                <md-textarea v-model="article.Remark" :md-counter="1200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <!-- 预期成果及成果形式 -->
            <TabPane name="9"  ref="pane9"  label="预期成果及成果形式">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">预期成果及成果形式</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>预期成果及成果形式</label>
                                <md-textarea v-model="article.Expect" :md-counter="1200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
            <TabPane name="10"  ref="pane10"  label="资助经费使用计划">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">资助经费使用计划</div>
                    </md-card-header>

                    <md-card-content>
                        <Form :model="article" ref="budgetForm"  label-position="left">
                            <Row>
                            <Col span="24">
                            <FormItem  label="经费预算"  :label-width="80">
                                <ButtonGroup shape="circle">
                                <!-- <Tooltip content="添加经费预算项" placement="bottom-start" transfer> -->
                                    <Button  v-if="!tpl"  type="primary" icon="md-add" ghost @click="budgetOkBtnHandler">
                                        添加
                                        </Button>
                                <!-- </Tooltip> -->
                                <!-- <Tooltip content="移除经费预算项" placement="bottom-start" transfer> -->
                                    <Button  v-if="!tpl" type="primary" icon="md-remove" ghost @click="delBudgetHandler">
                                        移除
                                        </Button>
                                <!-- </Tooltip> -->
                                </ButtonGroup>
                                <span style="margin-left:25px;">总额： {{article.Budget}}</span>
                            </FormItem>
                                <div  v-for="(node, index) in article.ImsBudget" :key="node.Id" required>
                                <Row :gutter="15">
                                <Col span="6">
                                    <FormItem
                                    :label-width="100"
                                    :label="'资金用途 ' + (index+1)"
                                    :prop="'ImsBudget.' + index + '.Name'"
                                    :rules="{required: true, message: '资金用途 ' + (index+1) +'是必填项', trigger: 'blur'}"
                                    >
                                    <Input type="text" v-model.trim="node.Name" placeholder="请输入资金用途..."></Input>
                                    </FormItem>
                                </Col>
                                <Col span="6">
                                    <FormItem
                                    :label-width="100"
                                    :label="'预算金额(元)'"
                                    :prop="'ImsBudget.' + index + '.Budget'"
                                    :show-message="false"
                                    required
                                    >
                                    <InputNumber v-model.number="node.Budget" @on-change="budgetChange" :min="0"></InputNumber>
                                    </FormItem>
                                </Col>
                                <Col span="10">
                                    <FormItem
                                    label="说明"
                                    :label-width="60"
                                    :prop="'ImsBudget.' + index + '.Remark'"
                                    >
                                    <Input type="text" v-model.trim="node.Remark" placeholder="用途说明"></Input>
                                    </FormItem>
                                </Col>
                                </Row>
                            </div>
                            </Col>
                            </Row>
                        </Form>
                    </md-card-content>
                    </md-card>
                 </div>
            </TabPane>
        </Tabs>
    </Card>
</template>
<script>
import { newApiParams, GUID, sectionToChinese } from '@/common/utils';
import { SERVER_CPT_URL } from '@/api/config';
// import { MdField } from 'vue-material/dist/components';
import { mapState } from 'vuex';
export default {
  name: 'Chuangxing',
  //   components: {
  //     'md-field': MdField
  //   },
  data () {
    return {
      tab: {
        extraLabel: '下一页',
        value: '0'
      },
      article: {
        SequenceId: this.$route.params.sequence,
        ProjectType: 2,
        Step: 0,
        Start: new Date(),
        ImsBudget: [],
        Budget: 0,
        ImsProjectGroup: [],
        ImsProjectAttachment: [],
        ImsTotur: [
          {
            'Id': GUID(),
            'Seq': 0
          }
        ]
      },
      attachment: {

      },
      group: [],
      tutors: [],
      allTutors: [],
      selectTutor: [],
      charge: {
        total: 0,
        item: [],
        flag: false,
        budget: {
          Name: '',
          Remark: '',
          Budget: 1,
          Id: GUID()
        }
      }
    };
  },
  props: {
    tpl: {
      type: Boolean,
      default: () => false
    },
    ath: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    user () {
      return this.$store.state.app.userInfo;
    },
    actionUrl () {
      return SERVER_CPT_URL + '/upload/fileupload';
    },
    uploadData () {
      return {
        Authorization: localStorage.getItem('token')
      };
    },
    addmode () {
      return !!this.$route.params.addMode;
    },
    editable () {
      return !!this.$route.params.editable;
    }
  },
  methods: {
    uploadErrHandler (err) {
    //   console.log(err);
      this.$Message.error(err);
    },
    
    uploadSuccessHandler (response, file, fileList) {
    //   alert(response);
      console.log(response);
      let data = JSON.parse(response.jdata);
      this.article.ImsProjectAttachment.push({
        Id: GUID(),
        Name: data.name,
        Size: data.size,
        Url: data.fid,
        Type: 0,
        Remark: data.suffix
      });
    },
    removeFile (item) {
    //   console.log(item);
      let idx = -1;
      for (let k = 0; k < this.article.ImsProjectAttachment.length; k++) {
        if (this.article.ImsProjectAttachment[k].Id === item.Id) {
          idx = k;
        }
      }
      
      if (idx !== -1) {
        this.$api.DeleteFile({ Fid: item.Url }).then(res => {
          this.$delete(this.article.ImsProjectAttachment, idx);
        }, err => {
          if (err) {
            this.$Message.error(err);
          }
        });
      }
    },
    turorChange (val) {
      for (let k = 0; k < this.allTutors.length; k++) {
        if (val === this.allTutors[k]['Id']) {
          this.article.TutorName = this.allTutors[k]['Abbr'];
          break;
        }
      }
    },
    QueryTutor () {
      let params = newApiParams();
      params.query.roleName = '导师';
      this.$api.QueryUsersByRoleNameAndDept(params).then((res) => {
        if (Array.isArray(res.Data) && res.Data.length > 0) {
          this.allTutors = res.Data;
        } else {
          console.log(res);
        }
      }).catch((err) => {
        if (err) {
          this.$Message.error(err, 4);
        }
      });
    },
    // 初始化项目组， 将申报人作为第一项目负责人
    initGroup () {
      this.article.ImsProjectGroup.push({
        'Title': '第' + sectionToChinese(this.article.ImsProjectGroup.length + 1) + '完成人',
        'Id': GUID(),
        'UserName': this.user.Abbr,
        'Sex': this.user.Sex,
        'Grade': '',
        'Class': '',
        'College': this.user.Dept[0].Name,
        'Phone': this.user.Mobile,
        'No': ''
      });
    },
    addUserGroup () {
      this.article.ImsProjectGroup.push({
        'Id': GUID(),
        'Seq': this.article.ImsProjectGroup.length,
        'Title': '第' + sectionToChinese(this.article.ImsProjectGroup.length + 1) + '完成人'
      });
    },
    removeUserGroup () {
      this.article.ImsProjectGroup.pop();
    },
    initTutors () {

    },
    tutorsAddHandler () {
      this.article.ImsTotur.push({
        'Id': GUID(),
        'Seq': this.article.ImsTotur.length
      });
    },
    tutorsDeleteHandler () {
      this.article.ImsTotur.pop();
    },
    // initTutors () {
    //   this.tutors.push({
    //     'Name': '姓名',
    //     'Sex': '性别',
    //     'Age': '年龄',
    //     'Title': '职称',
    //     'Job': '职务',
    //     'OrgName': '单位',
    //     'Phone': '联系电话',
    //     'Mobile': '联系电话',
    //     'Email': '邮箱'
    //   });
    //   this.tutors.push({
    //     'Name': '姓名',
    //     'Sex': '性别',
    //     'Age': '年龄',
    //     'Title': '职称',
    //     'Job': '职务',
    //     'OrgName': '单位',
    //     'Phone': '联系电话',
    //     'Mobile': '联系电话',
    //     'Email': '邮箱'
    //   });
    // },
    dateChage () {
    //   console.log(typeof this.article.Start);
      if (this.article.Start.getTime() >= this.article.End.getTime()) {
        this.$Message.warning('请填写正确的起止日期！');
        this.article.End.setDate(this.article.Start.getDay() + 30);
      }
    },
    next () {
      switch (this.tab.value) {
      case '0':
        if (this.checkBase()) {
        //   console.log('下一步');
          this.tab.value = '1';
        //   this.$refs['pane1'].click();
        } else {
          this.$Message.warning('请补充信息');
        }
        break;
      case '1':
        if (!this.checkGroup()) {
          this.$Message.warning('请补充项目成员信息！');
        //   this.tab.value = '1';
        } else {
          this.tab.value = '2'; 
        }
        break;
      case '2':
        if (!this.checkTutor()) {
          this.$Message.warning('请补充项目指导老师信息！');
          // this.tab.value = '2';
        } else {
          this.tab.value = '3'; 
        }
        break;
      case '3':
        if (!this.checkGroupDetail()) {
          this.$Message.warning('请补充项目组成员情况介绍！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '4'; 
        }
        break;
      case '4':
        if (!this.checkDesc()) {
          this.$Message.warning('请补充项项目简介！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '5'; 
        }
        break;
      case '5':
        if (!this.checkAnalysis()) {
          this.$Message.warning('请补充项目可行性分析！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '6'; 
        }
        break;
      case '6':
        if (!this.checkSchedule()) {
          this.$Message.warning('请补充项目运作模式和项目进度计划！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '7'; 
        }
        break;
      case '7':
        if (!this.checkBenefit()) {
          this.$Message.warning('请补充项目经济和社会效益分析！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '8'; 
        }
        break;
      case '8':
        if (!this.checkRemark()) {
          this.$Message.warning('请补充成员分工情况以及对完成项目任务的承诺！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '9'; 
        }
        break;
      case '9':
        if (!this.checkExpect()) {
          this.$Message.warning('请补充预期成果及成果形式！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '10'; 
        }
        break;
      case '10':
        if (!this.checkBudget()) {
          this.$Message.warning('请补充资助经费使用计划！');
          // this.tab.value = '3';
        } else {
          this.tab.value = '10'; 
        }
        break;
      }
    },
    checkBase () {
      if (this.article.Name && this.article.Start && this.article.End) {
        return true;
      } else {
        return false;
      }
    },
    checkGroup () {
      // if (this.article.ImsProjectGroup.length <= 0) {
      //   return false;
      // }
      // let creater = this.article.ImsProjectGroup[0];
      // if (creater.UserName && creater.Id && creater.Email && creater.Sex !== '' && creater.Grade && creater.Class && creater.College &&
      //    creater.Phone && creater.No) {
      //   return true;
      // }
      // return false;
      return this.article.ImsProjectGroup.length > 0;
    },
    checkTutor () {
      // return !!this.article.TutorId;
      return this.article.ImsTotur.length > 0;
    },
    checkGroupDetail () {
      return !!this.article.GroupDetail;
    },
    checkDesc () {
      return !!this.article.Desc;
    },
    checkScheme () {
      return !!this.article.Scheme;
    },
    checkAnalysis () {
      return !!this.article.Analysis;
    },
    checkBenefit () {
      return !!this.article.Benefit;
    },
    checkSchedule () {
      return !!this.article.Schedule;
    },
    checkRemark () {
      return !!this.article.Remark;
    },
    checkContent () {
      return !!this.article.Content;
    },
    checkExpect () {
      return !!this.article.Expect;
    },
    checkBudget () {
      if (this.article.ImsBudget.length > 0 && this.$refs['budgetForm'].validate()) {
        return true;
      }
      return false;
    },
    submit () {
      if (!(this.article.Name && this.article.Start && this.article.End)) {
        this.$Message.warning('请补充项目基本信息！');
        this.tab.value = '0';
        return;
      }
      if (!this.checkGroup()) {
        this.$Message.warning('请补充项目成员信息！');
        this.tab.value = '1';
        return;
      }
      if (!this.checkTutor()) {
        this.$Message.warning('请补充项目指导老师信息！');
        this.tab.value = '2';
        return;
      }
      if (!this.checkGroupDetail()) {
        this.$Message.warning('请补充项目组成员情况介绍！');
        this.tab.value = '3';
        return;
      } 
      if (!this.checkDesc()) {
        this.$Message.warning('请补充项项目简介！');
        this.tab.value = '4';
        return;
      } 
      if (!this.checkAnalysis()) {
        this.$Message.warning('请补充项目可行性分析！');
        this.tab.value = '5';
        return;
      } 
        
      if (!this.checkSchedule()) {
        this.$Message.warning('请补充项目运作模式和项目进度计划！');
        this.tab.value = '6';
        return;
      } 
      if (!this.checkBenefit()) {
        this.$Message.warning('请补充项目经济和社会效益分析！');
        this.tab.value = '7';
        return;
      } 
      if (!this.checkRemark()) {
        this.$Message.warning('请补充成员分工情况以及对完成项目任务的承诺！');
        this.tab.value = '8';
        return;
      } 
      if (!this.checkExpect()) {
        this.$Message.warning('请补充预期成果及成果形式！');
        this.tab.value = '9';
        return;
      } 
      if (!this.checkBudget()) {
        this.$Message.warning('请填写项目经费预算表！');
        this.tab.value = '10';
        return;
      }
      this.$api.AddImsProject(this.article).then((res) => {
        this.$Message.success('保存成功！');
        this.disableRepeatClick = false;
        setTimeout(() => {
          this.$router.push({
            name: '项目申请'
          });
        }, 500);
      }).catch((err) => {
        if (err) {
          this.$Message.error(err, 4);
          this.disableRepeatClick = false;
        }
      });
      console.log('vaildate success !');
    },
    addBudgetHandler () {
      this.charge.flag = true;
    },
    budgetOkBtnHandler () {
      let item = {
        Id: GUID(),
        Name: '',
        Remark: '',
        Budget: 1,
        Status: 1,
        Utime: new Date(),
        Ctime: new Date()
      };
      this.article.ImsBudget.push(item);
      // this.charge.budget = {
      //   Id: GUID(),
      //   Name: '',
      //   Remark: '',
      //   Budget: 1
      // };
      this.budgetChange();
    },
    delBudgetHandler (node) {
      this.article.ImsBudget.pop();
      this.budgetChange();
    },
    budgetChange (val) {
      this.article.Budget = 0;
      for (let k = 0; k < this.article.ImsBudget.length; k++) {
        this.article.Budget += this.article.ImsBudget[k].Budget;
      }
    }
  },
  mounted () {
    // this.initGroup(0);
    // this.QueryTutor();
    this.initTutors();
    if (this.tpl) {
      this.$api.GetImsProjectById(this.ath.Id).then(res => {
        if (res.code === 0) {
          console.log(res.Data);
          this.article = res.Data;
        }
      });
    } else {
      if (!this.addmode) {
        this.$api.GetImsProjectById(this.$route.params.project.Id).then(res => {
          if (res.code === 0) {
            console.log(res.Data);
            this.article = res.Data;
          }
        });
      // this.article = this.$route.params.project;
      }
    }
  }
};
</script>
<style scoped>
input {
    max-width: 100%;
    border-radius: 0;
    font: inherit;
    background-color: transparent;
    border-style: none;
    flex: 1 1 auto;
    line-height: 20px;
    padding: 8px 0 8px;
    max-width: 100%;
    min-width: 0px;
    width: 100%;
}
input:active {
    border-style: none;
}
.tab_content {
    margin: 5px;
    line-height: 1.5em;
}
.input-lable {
    vertical-align: middle;
}
.md-textarea {
    min-height: 600px !important;
}
</style>

